<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			订单详情
		</view>
		<view class="base-box" v-if="!loading" >
			<view class="base">
				<u-table class="u-table-basic"  align="left">
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							基础信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							项目名称
						</u-td>
						<u-td class="u-table-td "  >
							{{data.item.title}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							项目价格
						</u-td>
						<u-td class="u-table-td "  >
							￥{{(data.item.price / 100).toFixed(2)}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							项目总价格
						</u-td>
						<u-td class="u-table-td "  >
							￥{{(data.item.total / 100).toFixed(2)}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							项目数量
						</u-td>
						<u-td class="u-table-td "  >
							{{(data.item.number )}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							项目时长
						</u-td>
						<u-td class="u-table-td "  >
							{{data.item.time}}ms
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户姓名
						</u-td>
						<u-td class="u-table-td "  >
							{{data.address.name}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户手机号
						</u-td>
						<u-td class="u-table-td "  >
							{{initMbile(data.address.mobile)}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户地址
						</u-td>
						<u-td class="u-table-td "  >
							{{data.address.address_name}}-{{data.address.address}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							技师姓名
						</u-td>
						<u-td class="u-table-td "  >
							{{data.technician.name}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							技师手机号
						</u-td>
						<u-td class="u-table-td "  >
							{{data.technician.mobile}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr"  v-if="data.shop">
						<u-td class="u-table-td bold" width="104px" >
							店铺信息
						</u-td>
						<u-td class="u-table-td "  >
							{{data.shop.title}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							支付方式
						</u-td>
						<u-td class="u-table-td "  >
							{{data.pay.text}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							预计到达时间
						</u-td>
						<u-td class="u-table-td "  >
							{{data.arrival_time.time}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							订单号
						</u-td>
						<u-td class="u-table-td "  >
							{{data.order_no}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							订单状态
						</u-td>
						<u-td class="u-table-td "  >
							<view :style="`color:${onStatusColor(data.status[data.status.length-1].value)};`" class="uni-global-pointer" @click="onOrderStatus(data.status)">
								{{data.status[data.status.length-1].text}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							车费
						</u-td>
						<u-td class="u-table-td "  >
							￥{{(data.fare / 100).toFixed(2)}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							是否支付
						</u-td>
						<u-td class="u-table-td "  >
							{{ data.is_pay ?'已支付':'未支付' }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" v-if="data.timeout_time" >
						<u-td class="u-table-td bold " width="104px" >
							超时时间
						</u-td>
						<u-td class="u-table-td uni-color-error"  >
							{{ data.timeout_time}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							备注
						</u-td>
						<u-td class="u-table-td "  >
							{{ data.notes || '暂无备注' }}
						</u-td>
					</u-tr>
				</u-table>
			</view>
			<view class="base">
				<u-table class="u-table-basic"  align="left" >
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							图片信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户头像
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="100px" height="100px" :src="data.userinfo.head_image"
									@click="eventImage(data.userinfo.head_image)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							技师头像
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="100px" height="100px" :src="data.technician.head_image"
									@click="eventImage(data.technician.head_image)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							项目图片
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="200px" height="100px" :src="data.item.image"
									@click="eventImage(data.item.image)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" v-if="data.shop">
						<u-td class="u-table-td bold" width="104px" >
							所属店铺logo
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="200px" height="100px" :src="data.shop.logo"
									@click="eventImage(data.shop.logo)"></u-image>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
	<u-popup v-model="showStatusOrder" mode="center" border-radius="10"  closeable>
		<view class="uni-popup-box" style="width: 400px;padding:30px;" >
			<!-- <u-steps :list="numList" :current="(numList.length==4?4: numList.length-2)" mode="number" direction="column" ></u-steps> -->
			<u-time-line>
				<u-time-line-item v-for="(item,index) in numList" :key="index">
					<template v-slot:node v-if="(numList.length-1)==index" >
						<view class="u-node" style="background: #23b7e5;">
							<u-icon name="pushpin-fill" color="#fff" :size="35"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="" :style="`color:${onStatusColor(item.value)};`">
								{{item.text}}
							</view>
							<view class="u-order-time">
								<uni-dateformat :date="item.create_time"></uni-dateformat>
							</view>
						</view>
					</template>
				</u-time-line-item>
			
			</u-time-line>
		</view>
	</u-popup>
</template>

<script>
	import {onStepValue,onStatusColor} from "/common/js_file/user-list.js" ;
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:true,
				uid:'',
				showStatusOrder:false,// 状态弹出框
				data:{}
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				let field = "_id,technician,userinfo,address,item,shop,order_no,fare,notes,status,is_pay,pay,create_date,arrival_time,create_ip";
				global.getOne('orders',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					this.loading = false;
				})
			},
			initIdCard(idCard){
				return Util.formatBankCardNumber(`${idCard}`);
			},
			initBirthdy(birthdy){
				if( !birthdy ) return '' ;
				const firstFour = birthdy.substring(0, 4); // 截取前四位
				const remaining = birthdy.substring(4); // 截取剩余部分
				// 每两位添加空格
				const formatted = remaining.replace(/(.{2})/g, '-\$1 ').trim();
				return `${firstFour} ${formatted}`;
			},
			// 手机号初始化
			initMbile(mobile){
				return Util.formatPhoneNumber(mobile);
			},
			onStepValue(step){
				return onStepValue(step);
			},
			onOrderStatus(val){
				this.numList = val ;
				this.showStatusOrder = true;
			},
			// 订单状态颜色
			onStatusColor(val){
				return onStatusColor(val);
			},
			// 图片放大
			eventImage(image) {
				uni.previewImage({
					urls: [image],
				});
			},
		}
	}
</script>

<style>
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
	}
	.base{
		width: 50%;
	}
</style>
